<template>
  <el-row :gutter="20">
    <el-col :span="9">
      <div class="leftDiv"></div>
    </el-col>
    <el-col :span="6">
      <div class="rightDiv">
        <el-form
          :model="loginForm"
          ref="loginFromRef"
          label-width="auto"
          style="max-width: 600px"
          :rules="loginRules"
          v-show="isLogin"
        >
          <span @click="isLogin = false">zhu ce</span>
          <el-form-item label="zhang hu" prop="username">
            <el-input v-model="loginForm.username" :prefix-icon="Search" />
          </el-form-item>
          <el-form-item label="mi ma" prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="Please input password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">deng lu</el-button>
          </el-form-item>
        </el-form>
        <el-form
          :model="regForm"
          ref="regFromRef"
          :rules="regRules"
          label-width="auto"
          style="max-width: 600px"
          v-show="!isLogin"
        >
          <span @click="isLogin = true">deng lu</span>
          <el-form-item label="zhang hu" prop="username">
            <el-input v-model="regForm.username" />
          </el-form-item>
          <el-form-item label="mi ma" prop="password">
            <el-input
              v-model="regForm.password"
              type="password"
              placeholder="Please input password"
              show-password
            />
          </el-form-item>
          <el-form-item label="mi ma2" prop="repassword">
            <el-input
              v-model="regForm.repassword"
              type="password"
              placeholder="Please input password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">zhu ce</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="leftDiv"></div>
    </el-col>
  </el-row>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { reg, login, getUserinfo, getMenus } from '@/api/user'
import { useUserStore } from '@/stores'
import router from '@/router'

const loginFromRef = ref()
const regFromRef = ref()

const userStore = useUserStore()

// do not use same name with ref
const loginForm = reactive({
  username: '',
  password: '',
})

const loginRules = reactive({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})

const regForm = reactive({
  username: '',
  password: '',
  repassword: '',
})

const validatePassword = (rule, value, callback) => {
  if (regForm.password !== value) {
    callback(new Error('passwords are not the same'))
  } else {
    callback()
  }
}
const regRules = reactive({
  repassword: [{ validator: validatePassword, trigger: 'blur' }],
})

const isLogin = ref(true)

const onSubmit = () => {
  if (isLogin.value) {
    loginFromRef.value.validate((valid) => {
      if (valid) {
        login(loginForm).then((res) => {
          userStore.setToken(res.data.token)
          getUserinfo().then((res) => {
            userStore.setUserInfo(res.data.data)
          })
          getMenus().then((res) => {
            userStore.setUserMenus(res.data.data)
            router.push('/')
          })
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  } else {
    regFromRef.value.validate((valid) => {
      if (valid) {
        reg(regForm).then((res) => {
          if (res.data.code === 0) {
            isLogin.value = true
          }
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  }
}
</script>
<style scoped></style>
